<template>
	<div class="person">
		<!-- 树形结构 -->
		<div class="person-tree">
			<span>组织树</span>
			<el-tree
				:data="treeInfo"
				default-expand-all
				ref="orgTree"
				:expand-on-click-node="false"
				node-key="value"
				:props="defaultProps"
				@node-click="treeNodeClick"
			></el-tree>
		</div>
		<!-- 内容展示 -->
		<div class="person-show">
			<!-- 工具栏 -->
			<Toolbar>
				<!-- <template #left>
					<div class="left-item">
						<span>xx:</span>
						<el-input placeholder="请输入" size="small"></el-input>
					</div>
				</template> -->
				<template #right>
					<div class="right-item">
						<!-- <el-button size="small" type="info" plain>查询</el-button> -->
						<el-button size="small" type="info" @click="add">新增人员</el-button>
					</div>
				</template>
			</Toolbar>

			<div class="person-show__card">
				<!-- 表格展示 -->
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column type="index" align="center"></el-table-column>
						<el-table-column align="center" prop="firemanName" label="姓名"></el-table-column>
						<el-table-column align="center" prop="firemanPhone" label="电话"></el-table-column>
						<el-table-column align="center" prop="firemanJob" label="职务"></el-table-column>
						<el-table-column align="center" prop="orgName" label="组织名称"></el-table-column>
						<el-table-column align="center" label="操作" width="160">
							<template #default="{ row }">
								<el-button class="edit" type="text" size="mini" @click="edit(row)">
									编辑
								</el-button>
								<el-button class="delete" type="text" size="mini" @click="deleteRow(row)">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>

					<!-- 翻页 -->
					<div class="mt15">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="searchInfo.pageNum"
							:page-size="searchInfo.pageSize"
							:page-sizes="[10, 20, 50]"
							:total="totalPage"
							background
							layout="sizes, prev, pager, next, jumper"
						></el-pagination>
					</div>
				</div>
			</div>
		</div>

		<!-- 新增人员弹窗 -->
		<el-dialog title="人员新增" :visible.sync="showdialog_person" width="600px">
			<div class="formWrapper">
				<el-form ref="ruleForm" :rules="rules" :model="formData" label-width="80px">
					<el-form-item label="姓名：" prop="firemanName">
						<el-input placeholder="请输入" v-model="formData.firemanName"></el-input>
					</el-form-item>
					<el-form-item label="电话：" prop="firemanPhone">
						<el-input placeholder="请输入" v-model="formData.firemanPhone"></el-input>
					</el-form-item>
					<el-form-item label="职务：" prop="firemanJob">
						<el-input placeholder="请输入" v-model="formData.firemanJob"></el-input>
					</el-form-item>
					<el-form-item label="组织：">
						<el-input placeholder="当前未选中" disabled v-model="formData.orgName"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer">
				<el-button type="primary" @click="save('ruleForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
import { turnPage } from '@/mixins/turnPage';
import {
	getOrgTreeApi,
	getFireManInfoApi,
	addFireManApi,
	deleteFireManApi
} from '@/utils/api';

export default {
	mixins: [turnPage],
	name: 'Person',
	data() {
		return {
			showdialog_person: false,
			treeInfo: [] /* 树 */,
			defaultProps: {
				children: 'children',
				label: 'name'
			} /* 树形节点名 */,
			orgId: '',
			orgName: '',
			formData: {
				firemanName: '',
				firemanJob: '',
				firemanPhone: '',
				orgName: '',
				orgId: '',
				status: 0
			} /* 表格 */,
			rules: {
				firemanName: [{ required: true, message: '请填写消防员姓名', trigger: 'blur' }],
				firemanJob: [{ required: true, message: '请填写消防员职务', trigger: 'blur' }],
				firemanPhone: [
					{ required: true, message: '请填写消防员电话', trigger: 'blur' },
					{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
				]
			} /* 校验规则 */,
			tableData: [] /* 表格数据 */,
			totalPage: 1 /* 表格总数 */,
			searchInfo: {
				pageNum: 1,
				pageSize: 10,
				orgId: ''
			} /* 检索信息 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			await this.getOrgTree();
		},

		// 获取组织树
		async getOrgTree() {
			const res = await getOrgTreeApi();

			if (res.success) {
				this.treeInfo = res.data;

				this.$nextTick(() => {
					setTimeout(() => {
						this.treeInfo && this.$refs['orgTree'].setCurrentKey(this.treeInfo[0].value);
						this.orgId = this.treeInfo[0].value;
						this.orgName = this.treeInfo[0].name;
						this.searchInfo.orgId = this.treeInfo[0].value;
						this.queryTable();
					});
				});
			} else {
				this.$toast(res.msg);
			}
		},

		// 查询表格数据
		async queryTable() {
			const res = await getFireManInfoApi(this.searchInfo);

			if (res.success) {
				this.totalPage = res.data.total;
				this.tableData = res.data.list;
			} else {
				this.$toast(res.msg);
			}
		},

		// 树形结构的点击
		treeNodeClick(row) {
			this.orgName = row.name;
			this.orgId = row.value;
			this.searchInfo.orgId = row.value;
			this.queryTable();
		},

		// 保存信息
		save(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					const res = await addFireManApi(this.formData);

					if (res.success) {
						this.$message.success('操作成功');
						this.showdialog_person = false;
						this.queryTable();
					} else {
						this.$toast(res.msg);
					}
				} else {
					return false;
				}
			});
		},

		// 新增
		add() {
			this.showdialog_person = true;
			this.formData.firemanName = '';
			this.formData.firemanJob = '';
			this.formData.firemanPhone = '';
			this.formData.orgName = this.orgName;
			this.formData.orgId = this.orgId;
			if (this.formData.id) {
				delete this.formData.id;
			}
		},

		// 编辑
		edit(row) {
			this.formData.id = row.id;
			this.formData.firemanName = row.firemanName;
			this.formData.firemanJob = row.firemanJob;
			this.formData.firemanPhone = row.firemanPhone;
			this.formData.orgId = row.orgId;
			this.formData.orgName = row.orgName;
			this.showdialog_person = true;
		},

		// 删除
		async deleteRow(row) {
			const res = await deleteFireManApi({ id: row.id });

			if (res.success) {
				this.$message.success('已删除');
				this.queryTable();
			} else {
				this.$toast(res.msg);
			}
		}
	}
};
</script>
 
<style lang="scss">
.person {
	padding: 20px;
	font-size: 14px;
	display: flex;
	height: calc(100vh - 40px);

	.person-tree {
		min-width: 300px;
		border-radius: 3px;
		overflow: hidden;
		border: 1px solid #eee;
		box-shadow: $--xy-shadow-deep;

		& > span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 15px 0;
			background-color: rgb(0, 166, 217);
			color: #fff;
		}
	}

	.person-show {
		flex: 1;
		margin-left: 20px;
		border-radius: 3px;
		overflow: hidden;

		&__card {
			margin-top: 10px;
			padding: 0 15px;
		}
	}

	.toolbar-wrapper {
		height: 50px;
		box-sizing: border-box;
	}

	.left-item {
		padding-left: 15px;
		display: flex;
		align-items: center;

		& > span {
			display: inline-block;
			width: 120px;
			font-size: 13px;
			color: #666;
			margin-right: 5px;
		}

		.el-select {
			margin-right: 20px;
		}
	}

	.right-item {
		padding-right: 15px;
	}

	.el-tree {
		padding: 10px;
	}

	.el-form-item {
		width: 100%;

		input {
			width: 280px;
		}
	}

	.el-button.edit {
		color: rgb(2, 168, 223);

		&:hover {
			color: rgb(51, 204, 254);
		}

		&:active {
			color: rgb(2, 168, 223);
		}
	}

	.el-button.delete {
		color: rgb(217, 0, 51);

		&:hover {
			color: rgb(255, 49, 97);
		}

		&:active {
			color: rgb(217, 0, 51);
		}
	}

	.formWrapper {
		width: 100%;
		@include xy-dfc;
	}

	.el-tree-node.is-current > .el-tree-node__content {
		border: 1px solid #e2e2e2 !important;
		background-color: #f3f3f3;
		border-radius: 2px;
		box-shadow: 2px 3px 5px rgba(170, 170, 170, 0.3);
	}
}
</style>